<template>
  <div class="app-wrapper" :class="theme">
    <!-- 动态渲染布局组件 -->
    <component :is="currentLayoutComponent" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useLayoutStore } from '@/store/layout'
// 导入三种布局组件
import VerticalLayout from './vertical/index.vue'
import HorizontalLayout from './horizontal/index.vue'
import HybridLayout from './hybrid/index.vue'

const layoutStore = useLayoutStore()

// 计算属性
const theme = computed(() => layoutStore.layoutSettings.theme)
const layoutType = computed(() => layoutStore.layoutSettings.layoutType)

// 根据布局类型选择当前组件
const currentLayoutComponent = computed(() => {
  switch (layoutType.value) {
    case 'vertical':
      return VerticalLayout
    case 'horizontal':
      return HorizontalLayout
    case 'hybrid':
      return HybridLayout
    default:
      return VerticalLayout
  }
})

// 初始化
onMounted(() => {
  // 检查主题
  if (theme.value === 'dark') {
    document.documentElement.classList.add('dark')
  }
})
</script>

<style scoped lang="scss">
// 基础样式
.app-wrapper {
  min-height: 100vh;
  background-color: #f5f7fa;

  &.dark {
    background-color: #1a1a1a;
    color: #fff;
  }
}
</style>